<html>
<head>
    <title>动态修改下拉列表项</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function () {    // 加载事件进行处理
            document.getElementById("add").addEventListener("click", function () {
                changeOption("spe", "own");
            }, false);
            document.getElementById("delete").addEventListener("click", function () {
                changeOption("own", "spe");
            }, false);
            document.getElementById("spe").addEventListener("dblclick", function () {
                changeOption("spe", "own");
            }, false);
            document.getElementById("own").addEventListener("dblclick", function () {
                changeOption("own", "spe");
            }, false);
        }

        /**
         * 进行元素移动处理，根据指定的元素名称实现元素的移动和保存
         * @param sourceName 要移动的元素名称
         * @param destName 要保存的元素名称
         */
        function changeOption(sourceName, destName) {
            sourceObject = document.getElementById(sourceName);
            destObject = document.getElementById(destName);
            sourceOptionList = sourceObject.getElementsByTagName("option"); // 获取元素
            optionArray = new Array(); // 保存要移动的元素
            foot = 0; // 由于需要动态的元素处理，所以定义一个处理角标
            for (x = 0; x < sourceOptionList.length; x++) {
                if (sourceOptionList[x].selected) { // 元素被选中
                    optionArray[foot++] = sourceOptionList[x]; // 保存元素
                }
            }
            // 将所有保存在数组中的添加元素设置到第二个下拉列表框之中
            for (x = 0; x < optionArray.length; x++) {
                optionElement = document.createElement("option"); // 创建option元素
                optionElement.setAttribute("value", optionArray[x].getAttribute("value")); // 获取原始属性
                optionElement.appendChild(document.createTextNode(
                    optionArray[x].firstChild.nodeValue));
                sourceObject.removeChild(optionArray[x]); // 删除元素
                destObject.appendChild(optionElement); // 追加元素
            }
        }
    </script>
</head>
<body>
<div>请选择你擅长的IT技能：</div>
<select id="spe" multiple size="8">
    <option value="" disabled="">========== 请选择你擅长的技术 ==========</option>
    <option value="1">后端服务编程</option>
    <option value="2">前端UI</option>
    <option value="3">前端开发</option>
    <option value="4">移动开发</option>
    <option value="5">产品设计</option>
</select>
<button id="add">&gt;&gt;</button>
<button id="delete">&lt;&lt;</button>
<select id="own" multiple size="8">
    <option value="" disabled="">========== 个人擅长技术 ==========</option>
</select>
</div>
</body>
</html>
